<script>
import PageHeader from './components/PageHeader.vue';
import PageFooter from './components/PageFooter.vue';

export default {
  components: {
    PageHeader,
    PageFooter,
  },
};
</script>

<template>
  <page-header></page-header>
  <nav>
    <router-link to="/">书库</router-link>
    <router-link to="/bookshelf">书架</router-link>
    <router-link to="/review">评论</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <main>
    <router-view/>
  </main>
  <page-footer></page-footer>
</template>

<style scoped>
a {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-left: 4px solid #003388;
    border-right: 4px solid #003388;
    color: white;
}

a:hover {
    color: #d0ff00;
    background-color: #0a084e;
    border-left: 4px solid #d0ff00;
    border-right: 4px solid #d0ff00;
}
</style>